<template>
  <div>
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
        :disabled="isTask"
      >
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item
                label-width="140px"
                label="联系人"
                prop="contactsId"
              >
                <el-input
                  v-model="formData.contactsId"
                  placeholder="请输入联系人"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="140px"
                label="项目所在地"
                prop="adress"
              >
                <el-input
                  v-model="formData.adress"
                  placeholder="请输入项目所在地"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="140px"
                label="单位性质/客户属性"
                prop="customerAttrId"
              >
                <el-input
                  v-model="formData.customerAttrId"
                  placeholder="请输入单位性质/客户属性"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item
                label-width="140px"
                label="联系人部门"
                prop="contactsDeptId"
              >
                <el-input
                  v-model="formData.contactsDeptId"
                  placeholder="请输入联系人部门"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="140px"
                label="联系人电话"
                prop="contactsPhone"
              >
                <el-input
                  v-model="formData.contactsPhone"
                  placeholder="请输入联系人电话"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="关系度" prop="degree">
            <el-select
              v-model="formData.degree"
              placeholder="请选择关系度"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in degreeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="项目交付时间" prop="endTime">
            <el-date-picker
              v-model="formData.endTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择项目交付时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label-width="140px"
            label="建设方财务状况"
            prop="financialCondition"
          >
            <el-select
              v-model="formData.financialCondition"
              placeholder="请选择建设方财务状况"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in financialConditionOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label-width="140px"
            label="项目所属行业"
            prop="industryId"
          >
            <el-select
              v-model="formData.industryId"
              placeholder="请选择项目所属行业"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in industryIdOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label-width="140px"
            label="甲方对我方认可度"
            prop="partyToRecognition"
          >
            <el-select
              v-model="formData.partyToRecognition"
              placeholder="请选择甲方对我方认可度"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in partyToRecognitionOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label-width="140px"
            label="建设方付款方式"
            prop="payType"
          >
            <el-select
              v-model="formData.payType"
              placeholder="请选择建设方付款方式"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in payTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label-width="140px"
            label="项目估算金额"
            prop="projectEstimate"
          >
            <el-input
              v-model="formData.projectEstimate"
              placeholder="请输入项目估算金额"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="项目名称" prop="projectName">
            <el-input
              v-model="formData.projectName"
              placeholder="请输入项目名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label-width="140px"
            label="项目类型"
            prop="projectTypeId"
          >
            <el-select
              v-model="formData.projectTypeId"
              placeholder="请选择项目类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in projectTypeIdOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label-width="140px"
            label="乙方对甲方认可度"
            prop="recognitionToParty"
          >
            <el-select
              v-model="formData.recognitionToParty"
              placeholder="请选择乙方对甲方认可度"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in recognitionToPartyOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label-width="140px"
            label="我方负责人"
            prop="responsibleUserId"
          >
            <el-input
              v-model="formData.responsibleUserId"
              placeholder="请输入我方负责人"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="项目状态" prop="status">
            <el-select
              v-model="formData.status"
              placeholder="请选择项目状态"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in statusOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="战略意义" prop="strategic">
            <el-select
              v-model="formData.strategic"
              placeholder="请选择战略意义"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in strategicOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="投标时间" prop="tenderTime">
            <el-date-picker
              v-model="formData.tenderTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择投标时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="招标方式" prop="tenderingType">
            <el-select
              v-model="formData.tenderingType"
              placeholder="请选择招标方式"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in tenderingTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        address: "",
        confirmTime: "",
        contactsDeptId: "",
        contactsId: "",
        contactsPhone: "",
        contactsPosition: "",
        createBy: "",
        createTime: "",
        customerAttrId: "",
        customerId: "",
        customerName: "",
        degree: 1,
        deptId: "",
        deptName: "",
        endTime: "",
        financialCondition: 1,
        id: "",
        industryId: "",

        partyToRecognition: 1,
        payType: 1,
        projectCode: "",
        projectContentId: "",
        projectEstimate: "",
        projectName: "",
        projectTypeId: "",
        recognitionToParty: 1,
        responsibleUserId: "",
        startTime: "",
        status: "",
        strategic: 1,
        tenderTime: "",
        tenderingType: 1,
        token: "",
        updateBy: "",
        updateTime: "",
        modelId: this.$store.state.workflow.businessConfig.id,
      },
      rules: {
        contactsId: [
          {
            required: true,
            message: "请输入联系人",
            trigger: "blur",
          },
        ],
        adress: [
          {
            required: true,
            message: "请输入项目所在地",
            trigger: "blur",
          },
        ],
        customerAttrId: [
          {
            required: true,
            message: "请输入单位性质/客户属性",
            trigger: "blur",
          },
        ],
        contactsDeptId: [
          {
            required: true,
            message: "请输入联系人部门",
            trigger: "blur",
          },
        ],
        contactsPhone: [
          {
            required: true,
            message: "请输入联系人电话",
            trigger: "blur",
          },
        ],
        degree: [
          {
            required: true,
            message: "请选择关系度",
            trigger: "change",
          },
        ],
        endTime: [
          {
            required: true,
            message: "请选择项目交付时间",
            trigger: "change",
          },
        ],
        financialCondition: [
          {
            required: true,
            message: "请选择建设方财务状况",
            trigger: "change",
          },
        ],
        industryId: [
          {
            required: true,
            message: "请选择项目所属行业",
            trigger: "change",
          },
        ],
        partyToRecognition: [
          {
            required: true,
            message: "请选择甲方对我方认可度",
            trigger: "change",
          },
        ],
        payType: [
          {
            required: true,
            message: "请选择建设方付款方式",
            trigger: "change",
          },
        ],
        projectEstimate: [
          {
            required: true,
            message: "请输入项目估算金额",
            trigger: "blur",
          },
        ],
        projectName: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
        projectTypeId: [
          {
            required: true,
            message: "请选择项目类型",
            trigger: "change",
          },
        ],
        recognitionToParty: [
          {
            required: true,
            message: "请选择乙方对甲方认可度",
            trigger: "change",
          },
        ],
        responsibleUserId: [
          {
            required: true,
            message: "请输入我方负责人",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择项目状态",
            trigger: "change",
          },
        ],
        strategic: [
          {
            required: true,
            message: "请选择战略意义",
            trigger: "change",
          },
        ],
        tenderTime: [
          {
            required: true,
            message: "请选择投标时间",
            trigger: "change",
          },
        ],
        tenderingType: [
          {
            required: true,
            message: "请选择招标方式",
            trigger: "change",
          },
        ],
      },
      degreeOptions: [
        {
          label: "不认识",
          value: 1,
        },
        {
          label: "初始",
          value: 2,
        },
        {
          label: "普通",
          value: 3,
        },
        {
          label: "要好",
          value: 4,
        },
        {
          label: "密切",
          value: 5,
        },
      ],
      financialConditionOptions: [
        {
          label: "优",
          value: 1,
        },
        {
          label: "良",
          value: 2,
        },
        {
          label: "不好",
          value: 3,
        },
        {
          label: "未知",
          value: 4,
        },
      ],
      industryIdOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      partyToRecognitionOptions: [
        {
          label: "高",
          value: 1,
        },
        {
          label: "中",
          value: 2,
        },
        {
          label: "低",
          value: 3,
        },
        {
          label: "未知",
          value: 4,
        },
      ],
      payTypeOptions: [
        {
          label: "分期",
          value: 1,
        },
        {
          label: "垫资",
          value: 2,
        },
        {
          label: "全款",
          value: 3,
        },
      ],
      projectTypeIdOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      recognitionToPartyOptions: [
        {
          label: "高",
          value: 1,
        },
        {
          label: "中",
          value: 2,
        },
        {
          label: "低",
          value: 3,
        },
      ],
      statusOptions: [
        {
          label: "项目立项",
          value: 1,
        },
        {
          label: "项目实施",
          value: 2,
        },
        {
          label: "项目完成",
          value: 3,
        },
        {
          label: "项目终止",
          value: 4,
        },
      ],
      strategicOptions: [
        {
          label: "持续合作",
          value: 1,
        },
        {
          label: "潜力",
          value: 2,
        },
        {
          label: "样板示范",
          value: 3,
        },
      ],
      tenderingTypeOptions: [
        {
          label: "公开招标",
          value: 1,
        },
        {
          label: "邀标",
          value: 2,
        },
        {
          label: "仪标",
          value: 3,
        },
      ],
    };
  },
  mounted() {
    this.getFormData();
  },
  computed: {
    isTask() {
      return this.$store.state.workflow.formType.includes("task");
    },
    isEdit() {
      return this.$store.state.workflow.formType === "edit";
    },
  },
  methods: {
    //获取回显数据
    getFormData() {
      if (this.$store.state.workflow.businessConfig.formData) {
        this.formData = this.$store.state.workflow.businessConfig.formData;
      }
    },
    submit() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        this.formObject.modelId = this.$store.state.workflow.businessConfig.id;
        if (this.isEdit) {
          editBuyList(this.formObject).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
              this.$store.commit("workflow/SET_BUSINESSDRAWER", false);
            }
          });
        } else {
          addBuyList(this.formObject).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "新增成功！",
                type: "success",
              });
              this.$store.commit("workflow/SET_BUSINESSDRAWER", false);
            }
          });
        }
      });
    },
  },
};
</script>
<style></style>
